<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% 
	String context = request.getContextPath(); 
	String basePath = request.getServerName() + ":" + request.getServerPort() + context + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据回现封装</title>
		<link rel="stylesheet" type="text/css" href="<%=context%>/microcore/commoncss/basics.css" />
		<style type="text/css">
			body{background:#BCD68D;line-height: 30px;padding:0 30px}
		</style>
	</head>
	<body>
		<p><strong>数据回现封装：</strong>是指把后台的数据以json的格式传递到页面，通过<span style="color:red;">key和表单的name属性值对应</span>的关系，自动的显示到相对应的表单中.</p>
		<p>表单主要包括：input(text、password、checkbox、radio)、select、textarea</p>
		<h1>input(text、password、radio)、textarea数据回现</h1>
		<h3>html代码：</h3>
		&lt;form id="form1"><br />
			&nbsp;&nbsp;&lt;h3>个人信息修改&lt;/h3><br />
			&nbsp;&nbsp;用户名：&lt;input name="userName" type="text" /><br />
			&nbsp;&nbsp;性别：&lt;input name="sex" type="radio" value="1" />男&lt;input name="sex" type="radio" value="0" />女<br />
			&nbsp;&nbsp;原密码：&lt;input name="oldPwd" type="password" /><br />
			&nbsp;&nbsp;电话：&lt;input name="tel" type="text" /><br />
			&nbsp;&nbsp;籍贯：<br />
			&nbsp;&nbsp;&lt;select name="origin"><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="sichuan">四川&lt;/option><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="guangdong">广东&lt;/option><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="henan">河南&lt;/option><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="beijing">北京&lt;/option><br />
			&nbsp;&nbsp;&lt;/select><br />
			&nbsp;&nbsp;&lt;input type="button" class="btn btn-default" value="修改" /><br />
		&lt;/form>
		<h3>js代码：</h3>
		var options = {<br />
			&nbsp;&nbsp;userName:"张三",<br />
			&nbsp;&nbsp;oldPwd:"123456",<br />
			&nbsp;&nbsp;tel:"12345678901",<br />
			&nbsp;&nbsp;sex:"0"<br />
			&nbsp;&nbsp;describe:"我是一个活泼、开朗的人！",<br />
			&nbsp;&nbsp;origin:"guangdong"
			}<br />
			$("#form1").deserialize(options);
		<form id="form1">
			<h3>个人信息修改</h3>
			用户名：<input name="userName" type="text" /><br />
			性别：<input name="sex" type="radio" value="1" />男<input name="sex" type="radio" value="0" />女<br />
			原密码：<input name="oldPwd" type="password" /><br />
			电话：<input name="tel" type="text" /><br />
			籍贯：
			<select name="origin">
				<option value="sichuan">四川</option>
				<option value="guangdong">广东</option>
				<option value="henan">河南</option>
				<option value="beijing">北京</option>
			</select><br />
			个性描述：<textarea name="describe"></textarea>
			<input type="button" class="btn btn-default" value="修改" />
		</form>
		
		<h1>input数据回现(checked)</h1>
		<h3>html代码：</h3>
		&lt;form id="checkForm"><br />
			&nbsp;&nbsp;&lt;input type="checkbox" name="love" value="game"  />游戏<br />
			&nbsp;&nbsp;&lt;input type="checkbox" name="love" value="swimming" />游泳<br />
			&nbsp;&nbsp;&lt;input type="checkbox" name="love" value="mountain"  />爬山<br />
			&nbsp;&nbsp;&lt;input type="checkbox" name="love" value="TV"  />看电视<br />
			&nbsp;&nbsp;&lt;input type="checkbox" name="love" value="read"  />读书<br />
		&lt;/form>
		<h3>JS代码：</h3>
		var options2 = {<br />
				&nbsp;&nbsp;love:["TV","read"]<br />
			}<br />
			$("#checkForm").deserialize(options2);
		<form id="checkForm">
			<input type="checkbox" name="love" value="game"  />游戏
			<input type="checkbox" name="love" value="swimming" />游泳
			<input type="checkbox" name="love" value="mountain"  />爬山
			<input type="checkbox" name="love" value="TV"  />看电视
			<input type="checkbox" name="love" value="read"  />读书
		</form>
	</body>
	<script src="<%=context%>/microcore/jquery-2.1.0.min.js"></script>
	<script src="<%=context%>/microcore/form/deserialize.js"></script>
	<script>
		$(function(){
			var options = {
				userName:"张三",
				oldPwd:"123456",
				tel:"12345678901",
				sex:"0",
				describe:"我是一个活泼、开朗的人！",
				origin:"guangdong"
			}
			$("#form1").deserialize(options);
			
			var options2 = {
				love:["TV","read"]
			}
			$("#checkForm").deserialize(options2);
		});
	</script>
</html>
